<meta charset="utf-8">
<!-- <meta content="IE=9" http-equiv="x-ua-compatible"> -->
<style>
	.btn-select{
		background-color: #1ab394;
		border-color: #1ab394;
		color: #FFFFFF;
	}
</style>
<div id="dialogSpec" class="modal fade bs-modal-sm" tabindex="-2" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">脳</button>-->
				<!--<h4 class="modal-title">你是谁</h4>-->
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-xs-12">
						<!--<span th:each="spec : ${goodsSpec}" >
											<input type="radio" th:value="${spec.id}" name="brand" value="">
											<span th:text="${spec.name}"></span>
						</span>-->
						<span class="col-xs-6" style="padding: 10px 0;display: inline-block;width: 45%" th:each="spec : ${goodsSpec}" >
											<input type="radio" th:value="${spec.id}" name="brand" value="">
											<span th:text="${spec.name}"></span>
						</span>
					</div>
					<div class="col-xs-12" style="padding-top: 20px;">
						<div id="specList"></div>
					</div>
				</div>
			</div>
			<div class="modal-footer" style="margin-top: 40px; text-align: center">
				<button type="button" style="padding: 3px 10px;margin-right: 20px" class="btn btn-default" data-dismiss="modal">取消</button>
				<button id="dialogSpecOK" style="padding: 3px 10px" type="button" class="btn btn-primary" data-loading-text="确定...">确定</button>
			</div>
		</div>
	</div>
</div>
<script src="/js/jquery.min.js?v=2.1.4"></script>
<script src="/js/bootstrap.min.js?v=3.3.6"></script>
<script src="/js/plugins/layer/layer.js"></script>
<script language="JavaScript">
    $(document).ready(function () {
        $("#dialogSpecOK").on("click",function(){
            var spec=$("#dialogSpec input[type=radio]:checked").val();
            var text=$("#dialogSpec input[type=radio]:checked + span").text();
            if(spec){
                if($("#specList").find(".btn-select").length<1){
                    layer.alert("请选择一个规格值");
                    return false;
                }
                var ok=true;
                $("#specTab").find("input[name='specId']").each(function(){
                    if(spec==$(this).val()){
                        layer.alert("规格已存在");
                        ok=false;
                    }
                });
                if(ok){
                    var specValIds = "";
                    var specValText = "";
                    var specValUrl = "";
                    $("#specList").find("button").each(function () {
                        if ($(this).hasClass("btn-select")) {
                            specValIds += $(this).attr("data-id") + ",";
                            specValUrl += $(this).attr("data-url") + ",";
                            specValText += $(this).text() + ",";
                        }
                    });
                    var str =
                    '<tr align="center"><td height="45">' +
                        '<input type="hidden" name="specId" class="form-control" value="'+spec+'"><div class="specName">'+text+'</div></td>' +
                        '<td><input type="hidden" name="specValIds" class="form-control" value="'+specValIds+'"><input type="hidden" name="specValUrl" class="form-control" value="'+specValUrl+'"><input name="specValText" class="form-control" style="width: 300px;" readonly value="'+specValText+'"></td>' +
                        '<td width="2"></td>' +
                        '<td><i class="up fa fa-arrow-up" style="cursor:pointer;padding: 5px;" title="向上移动"></i>' +
                        '<i class="down fa fa-arrow-down" style="cursor:pointer;padding: 5px;" title="向下移动"></i>' +
                        '<i class="del fa fa-remove" style="cursor:pointer;padding: 5px;" title="删除"></i></td></tr>';
                    parent.loadSpec(str);
                    var index = parent.layer.getFrameIndex(window.name); // 鑾峰彇绐楀彛绱㈠紩
                    parent.layer.close(index);
                }
            }else{
                layer.alert("请选择一个规格");
            }
        });
        // $("#dialogSpec").modal("show");
        $("#specList ").unbind("click").on("click","button",function(){
            if($(this).hasClass("btn-default")){
                $(this).removeClass("btn-default");
                $(this).addClass("btn-select")
            }else if($(this).hasClass("btn-select")){
                $(this).removeClass("btn-select");
                $(this).addClass("btn-default")
            }
        });
        $("#dialogSpec input[type=radio]").on("click",function(){
            console.log($(this).val());
            console.log(2222);
            $.post("/wx/goodsType/specVal"  , {"id":$(this).val()}, function (data) {

                console.log(1111);
                console.log(data);
                if(data.code==0){
                    var str="";
                    $.each(data.data,function(idx,o){

                        var url=o.spec_picurl||'';
                        str+='<button type="button" style="border: 1px solid #666;width: 50px; padding: 5px;" class="btn btn-default btn-sm"  data-id="'+o.id+'" data-url="'+url+'">'+ o.specValue+'</button> ';
                    });
                    console.log(str);
                    $("#specList").html(str);
                }else{
                    alert(data.msg);
                }
            }, "json");
        });
    });

</script>
